import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
import Permission from '../views/admin/Permission.vue'
import User from '../views/admin/User.vue'
import Role from '../views/admin/Role.vue'
import Index from '../views/Index.vue'
import axios from "../lib/http";
import store from "../store"

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,
        children: [ //子路由
            {
                path: '/index',
                name: 'Index',
                component: Index
            },
            // {
            //     path: '/user',
            //     name: 'User',
            //     component: User
            // },
            // {
            //     path: '/permission',
            //     name: 'Permission',
            //     component: Permission
            // },
            // {
            //     path: '/role',
            //     name: 'Role',
            //     component: Role
            // },
        ]
    },
    {
        path: '/login',
        name: 'Login',
        component: Login
    },

    // {
    //     path: '/about',
    //     name: 'About',
    //     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    // }
]

const router = new VueRouter({
    routes,
    mode: 'history', //去掉路由中的#
})

//to：要调整到的路由
// from：从哪个路由过来
//next对应一个匿名函数，继续往下走，在里面咱们进行判断
router.beforeEach((to, from, next) => {
    let hasRoute = store.state.menus.hasRoutes  //在状态管理器里存的路由信息

    let token = localStorage.getItem("token")

    if (to.path == '/login') {//登陆页面，直接走
        next()

    } else if (!token) {  //token不存在，跳转到登陆页面
        next({path: '/login'})


    } else if (token && !hasRoute) {//token存在并且hasRoute没有信息，进行网络请求，获取导航
        axios.get("/sys/menu/nav", {
            headers: {
                Authorization: localStorage.getItem("token")
            }
        }).then(res => {

            console.log(res.data.data)

            // 拿到menuList
            store.commit("setMenuList", res.data.data.nav)

            // 拿到用户权限
            store.commit("setPermList", res.data.data.authoritys)

            console.log(store.state.menus.menuList)

            // 动态绑定路由
            let newRoutes = router.options.routes

            res.data.data.nav.forEach(menu => {
                if (menu.children) {
                    menu.children.forEach(e => {

                        // 转成路由
                        let route = menuToRoute(e)

                        // 吧路由添加到路由管理中
                        if (route) {
                            newRoutes[0].children.push(route)
                        }

                    })
                }
            })

            console.log("newRoutes")
            console.log(newRoutes)
            router.addRoutes(newRoutes)

            hasRoute = true
            store.commit("changeRouteStatus", hasRoute)
        })
    }


    next()
})
// 导航转成路由
const menuToRoute = (menu) => {

    if (!menu.component) {
        return null
    }

    let route = {
        name: menu.name,
        path: menu.path,
        meta: {
            icon: menu.icon,
            title: menu.title
        }
    }
    route.component = () => import('@/views/' + menu.component + '.vue')

    return route
}
export default router
